<template>
    <div class="r-container dashboard">
        <div class="dashboard-hello">
            <div class="welcome">欢迎你登录管理系统</div>
            <div class="welcome-hi">
                <icon name="hi"></icon>
                <span class="nickname">douhaomi</span>
                <span> - </span>
                <span>每当你想放弃的时候，想一想是什么支撑着你一路坚持。</span>
            </div>
        </div>
        <div class="container">
            <div class="site-total">
                <el-row>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="12">
                                <div class="total">
                                    <div class="total—box">
                                        <icon name="user" class="total-icon"></icon>
                                        <div class="total—box__item">
                                            <div class="total—box__item__label">个人注册</div>
                                            <div class="total—box__item__count">
                                                <span>1,500</span>
                                                <icon name="arrow-down" class="arrow-down"></icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="total-simple">48% 过去24小时</div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="total">
                                    <div class="total—box">
                                        <icon name="company" class="total-icon"></icon>
                                        <div class="total—box__item">
                                            <div class="total—box__item__label">企业注册</div>
                                            <div class="total—box__item__count">
                                                <span>1,500</span>
                                                <icon name="arrow-up" class="arrow-up"></icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="total-simple">48% 过去24小时</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="16">
                        <el-row>
                            <el-col :span="6">
                                <div class="total">
                                    <div class="total—box">
                                        <icon name="resume2" class="total-icon"></icon>
                                        <div class="total—box__item">
                                            <div class="total—box__item__label">待审简历</div>
                                            <div class="total—box__item__count">
                                                <span>1,500</span>
                                                <icon name="arrow-up" class="arrow-up"></icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="total-simple">48% 过去24小时</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="total">
                                    <div class="total—box">
                                        <icon name="post" class="total-icon"></icon>
                                        <div class="total—box__item">
                                            <div class="total—box__item__label">待审职位</div>
                                            <div class="total—box__item__count">
                                                <span>1,500</span>
                                                <icon name="arrow-up" class="arrow-up"></icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="total-simple">48% 过去24小时</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="total">
                                    <div class="total—box">
                                        <icon name="post" class="total-icon"></icon>
                                        <div class="total—box__item">
                                            <div class="total—box__item__label">待审兼职</div>
                                            <div class="total—box__item__count">
                                                <span>1,500</span>
                                                <icon name="arrow-down" class="arrow-down"></icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="total-simple">48% 过去24小时</div>
                                </div>
                            </el-col>
                            <el-col :span="6">
                                <div class="total">
                                    <div class="total—box">
                                        <icon name="captcha" class="total-icon"></icon>
                                        <div class="total—box__item">
                                            <div class="total—box__item__label">待审认证</div>
                                            <div class="total—box__item__count">
                                                <span>1,500</span>
                                                <icon name="arrow-up" class="arrow-up"></icon>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="total-simple">48% 过去24小时</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </div>
            <div class="mt-20">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="block">
                            <div class="block-header">
                                <div class="title"><icon name="server"></icon>系统信息</div>
                            </div>
                            <div class="block-content">
                                <el-table :show-header="false" :data="serverData">
                                    <el-table-column prop="item" label="项目" width="100"></el-table-column>
                                    <el-table-column label="配置">
                                        <template #default="scope">
                                            <div v-html="scope.row.config"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="block">
                            <div class="block-header">
                                <div class="title"><icon name="xunsearch"></icon>讯搜</div>
                            </div>
                            <div class="block-content">
                                <el-table :show-header="false" :data="codeData">
                                    <el-table-column prop="item" label="项目" width="100"></el-table-column>
                                    <el-table-column label="配置">
                                        <template #default="scope">
                                            <div v-html="scope.row.config"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <!--                    <el-card class="card-box">-->
                        <!--                        <div slot="header" class="clearfix">-->
                        <!--                            <span>卡片名称</span>-->
                        <!--                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
                        <!--                        </div>-->
                        <!--                        <div v-for="o in 4" :key="o" class="text item">-->
                        <!--                            {{'列表内容 ' + o }}-->
                        <!--                        </div>-->
                        <!--                    </el-card>-->
                        <!--                    <div class="block block-rounded">-->
                        <!--                        <div class="block-header">-->
                        <!--                            <div class="title"><icon name="code"></icon>产品开发</div>-->
                        <!--                        </div>-->
                        <!--                        <div class="block-content">-->
                        <!--                            <el-table :data="codeData" style="width: 100%">-->
                        <!--                                <el-table-column prop="item" label="项目" width="100"></el-table-column>-->
                        <!--                                <el-table-column label="配置">-->
                        <!--                                    <template slot-scope="scope">-->
                        <!--                                        <div v-html="scope.row.config"></div>-->
                        <!--                                    </template>-->
                        <!--                                </el-table-column>-->
                        <!--                            </el-table>-->
                        <!--                        </div>-->
                        <!--                    </div>-->
                    </el-col>
                </el-row>
            </div>
            <div class="mt-20">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="block">
                            <div class="block-header">
                                <div class="title"><icon name="server"></icon>系统信息</div>
                            </div>
                            <div class="block-content">
                                <el-table :show-header="false" :data="serverData">
                                    <el-table-column prop="item" label="项目" width="100"></el-table-column>
                                    <el-table-column label="配置">
                                        <template #default="scope">
                                            <div v-html="scope.row.config"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="block">
                            <div class="block-header">
                                <div class="title"><icon name="xunsearch"></icon>讯搜</div>
                            </div>
                            <div class="block-content">
                                <el-table :show-header="false" :data="codeData">
                                    <el-table-column prop="item" label="项目" width="100"></el-table-column>
                                    <el-table-column label="配置">
                                        <template #default="scope">
                                            <div v-html="scope.row.config"></div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { State } from 'vuex-class'

import AuthMixin from '@/mixins/cms/auth'

@Component
export default class Dashboard extends mixins(AuthMixin) {
  private serverData = [
    {
      item: 'Laravel',
      config: '5.5.28'
    },
    {
      item: '服务器环境',
      config: '运行环境：Apache/2.4.29 (Win32)'
    },
    {
      item: 'PHP',
      config: '版本：<code>7.1.12</code> 上传限制：<span class="el-tag el-tag--mini el-tag--success el-tag--dark">500M</span>'
    },
    {
      item: '网站域名/IP',
      config: 'yqrc.cn <span class="el-tag el-tag--mini el-tag--dark">192.168.0.155</span>'
    }
  ]
  private codeData = [
    {
      item: '产品名称',
      config: '乐清人才网招聘管理系统'
    },
    {
      item: '产品开发',
      config: '逗号米 <span class="el-tag el-tag--mini el-tag--dark">douhaomi</span>'
    },
    {
      item: 'PHP',
      config: '版本：<span class="el-tag el-tag--mini el-tag--success el-tag--dark">7.1.12</span> 上传限制：<span class="el-tag el-tag--mini el-tag--dark">500M</span>'
    },
    {
      item: '网站域名/IP',
      config: 'yqrc.cn <span class="el-tag el-tag--mini el-tag--dark">192.168.0.155</span>'
    }
  ]

  // Vuex
  @State user: any

  // get userinfo() {
  //   return useStore().state.user
  // }
  //
  created() {
    // console.log(this.user)
  }
  // private computed() {
  //   mapState('adminUsers', ['adminUsers'])
  // }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/view/dashboard";
</style>
